<template>
  <div>
    <TableList
      ref="TableList"
      :model-value="searchFormData"
      request-url="system/template/list"
      request-method="get"
      :table-data="tableData"
      :table-column="tableColumn"
    >
      <!-- 搜索去内容 -->
      <template #search>
        <el-form-item label="模板名称: " prop="templateName">
          <el-input v-model="searchFormData.templateName" autocomplete="off" placeholder="请输入模板名称" size="small" clearable />
        </el-form-item>
        <el-form-item label="模板唯一值" prop="uniqueValue">
          <el-input v-model="searchFormData.uniqueValue" autocomplete="off" placeholder="请输入唯一值" size="small" clearable />
        </el-form-item>

      </template>
      <!-- 按钮区 -->
      <template #btns>
        <el-button size="small" type="primary" @click="drawer=true">新增模版</el-button>
      </template>

      <!-- 自定义status 列 -->
      <template #status="{ item, row }">
        <div>{{ ['删除', '启用', '禁用'][row[item]] }}</div>
      </template>
      <!-- 图片 -->
      <template #templateFile="{ item, row }">
        <div class="demo-image__preview">
          <el-link v-if="row['type'] == '文件'" target="_blank" :href="row[item]" type="primary" :underline="false">点击查看文件</el-link>
          <el-image
            v-if="row['type'] == '图片'"
            style="width: 100px; height: 100px"
            :src="row[item]"
            :preview-src-list="[row[item]]"
          />
          <el-link v-if="row['type'] == '视频'" target="_blank" :href="row[item]" type="primary" :underline="false">点击查看视频</el-link>
        </div>
      </template>

      <!-- 自定义operate 列 -->
      <template #operate="{ item, row }">
        <div style="display: flex; gap: 10px;">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <DeleteButton @delete-item="deleteItem(row)" />
        </div>
        <!-- <el-button type="text" size="small" @click="deleteItem(row)">删除</el-button> -->
      </template>

    </TableList>
    <Form
      :drawer="drawer"
      :default-value="detailValue"
      :classify-list="classifyList"
      @add-success="addSuccess"
      @close:drawer="drawer=false"
    />

  </div>
</template>

<script>
import TableList from '@/components/TableList'
import DeleteButton from '@/components/DeleteButton'
// import MyForm from '@/components/Test'
import Form from './form'
import { myMixin } from './data.js'
import { area } from '@/utils/area'
import request from '@/utils/request'

export default {
  components: {
    TableList,
    Form,
    DeleteButton
  },
  mixins: [myMixin],
  data() {
    return {
      drawer: false,
      searchFormData: {},
      detailValue: {},

      tableData: [],
      classifyList: []
    }
  },
  created() {
    // this.getClassifyList()
  },
  methods: {
    addSuccess() {
      this.drawer = false
      this.$refs.TableList?.requestData()
    },
    async handleUpdate(row) {
      this.drawer = true
      this.detailValue = row
    },
    getClassifyList() {
      request({ url: 'system/category/list', method: 'get', params: { pageSize: 1000 }}).then(res => {
        if (res.code === 200) {
          this.classifyList = res.rows.map(item => ({ value: item.category, label: item.category }))
        }
      })
    },
    deleteItem(row) {
      // system/template
      request({ url: `system/template/${row.id}`, method: 'delete' }).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.$refs['TableList'].requestData()
        } else {
          this.$message({
            message: '删除失败',
            type: 'warning'
          })
        }
      })
    }
  }

}
</script>
